body {
  margin: 0px;
  background-image: url('../images/bg.png');
  background-repeat: repeat;
}

input[name='game'] {
  width: 0px;
  height: 0px;
}

header {
  background-color: #fff;
  display: flex;
  justify-content: center;
  padding: 2vh;
}

header img {
  width: 27%;
}

main {
  width: 100vw;
  aspect-ratio: 9 / 10;
  background-image: url('../images/m0001.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom center;
  position: relative;
  transition: background-image 0.5s ease-in-out;
}

.game-nav {
  position: absolute;
  left: 3vw;
  right: 3vw;
  bottom: 0px;
  display: flex;
  gap: 1vw;
  background-color: rgba(0, 0, 0, 0.5);
}

.game-nav img {
  width: 100%;
  aspect-ratio: 1 /1;
}

#game1:checked ~ main {
  background-image: url('../images/m0001.png');
}

#game2:checked ~ main {
  background-image: url('../images/m0002.png');
}

#game3:checked ~ main {
  background-image: url('../images/m0003.png');
}

#game4:checked ~ main {
  background-image: url('../images/m0004.png');
}

#game5:checked ~ main {
  background-image: url('../images/m0005.png');
}

#game6:checked ~ main {
  background-image: url('../images/m0006.png');
}

.links {
  display: flex;
  padding: 1rem;
  justify-content: space-evenly;
}

.links img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.links > div {
  width: 9vw;
  aspect-ratio: 1 / 1;
  border: 2px solid #555;
  padding: 2vw;
  border-radius: 50%;
}

.intro-box {
  width: 94vw;
  margin: 0px auto;
  background-color: #fff;
  box-shadow: 2px 2px 10px #dcdcdc;
  padding: 4vw;
}

.l1 > p:first-of-type {
  font-size: 2rem;
  font-weight: bold;
  margin: 0px;
  padding-right: 4rem;
}

.l1 > p:last-of-type {
  background-image: linear-gradient(
    -135deg,
    #3778e5,
    #e98bc0,
    #3778e5,
    #e98bc0,
    #3778e5
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.l3 {
  color: #666;
  font-size: 0.8rem;
}

.l3 p {
  margin: 0px;
}

.intro-box > div {
  display: none;
}

#game1:checked ~ .intro-box > div:nth-of-type(1) {
  display: block;
}
#game2:checked ~ .intro-box > div:nth-of-type(2) {
  display: block;
}
#game3:checked ~ .intro-box > div:nth-of-type(3) {
  display: block;
}
#game4:checked ~ .intro-box > div:nth-of-type(4) {
  display: block;
}
#game5:checked ~ .intro-box > div:nth-of-type(5) {
  display: block;
}
#game6:checked ~ .intro-box > div:nth-of-type(6) {
  display: block;
}

.number-box {
  display: flex;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  margin: 1rem;
}

.number-box > div:first-of-type {
  transition: all 0.5s linear;
}

#game1:checked ~ .number-box > div:first-of-type {
  transform: translateY(0%);
}

#game2:checked ~ .number-box > div:first-of-type {
  transform: translateY(-1.2em);
}

#game3:checked ~ .number-box > div:first-of-type {
  transform: translateY(-2.4em);
}

#game4:checked ~ .number-box > div:first-of-type {
  transform: translateY(-3.6em);
}

#game5:checked ~ .number-box > div:first-of-type {
  transform: translateY(-4.8em);
}

#game6:checked ~ .number-box > div:first-of-type {
  transform: translateY(-6em);
}
